import React, { useEffect } from 'react';
import './App.css';
import { observer } from "mobx-react";
import { values } from "mobx";
import { randomId } from './models/index'
import { TodoTotalView } from './components/TodoTotalView';
import { TodoListView } from './components/TodoListView';
import { OtherView } from "./components/OtherView";
import { useTodo } from "./hooks/useTodo"
import styled from 'styled-components';

const Wrapper = styled.div`
  margin-top:120px;padding: 30px 50px;
  margin-left: auto;margin-right:auto;
  width:500px;background-color:#87cefa29;
  >div{
    display:flex; 
    justify-content:space-between;
  }
`
const Top = styled.div`
  margin-bottom:10px;font-size:18px; font-weight: bolder;
  display:flex;align-items:center;
`
const Addbtn = styled.button`
  border:none;outline:none;
  background-color: #fff;
  width: 100px; height: 40px;
  border-radius: 12px;font-size:14px;
  cursor: pointer;
`

export const App = observer((props: any) => {
  useTodo(props)
  return (
    <Wrapper>
      <Top>待办清单<Addbtn onClick={e => props.store.addTodo(randomId(), "新的 todo")}>添加</Addbtn></Top>
      <TodoListView store={props.store}></TodoListView>
      <TodoTotalView store={props.store}></TodoTotalView>
      <OtherView store={props.store}></OtherView>
    </Wrapper>
  )
});

export default App;
